<div id="profile-total-container" class="stripe stripe-accent">
  <h1
    id="profile-username"
    data-name="<%= @user.username %>"
  >
    <%= @user.username %>
  </h1>
  <ul id="profile-detail-list">
    <li>
      User since
      <time id="registered-at" datetime="<%= Calendar.Strftime.strftime!(@user.inserted_at, "%F") %>">
        <%= Calendar.Strftime.strftime!(@user.inserted_at, "%b %e, %Y") %></time>.
    </li>
    <li>
      Last programmed
      <%= if @last_day_coded != nil do %>
        on
        <time id="last-programmed-at" datetime="<%= Calendar.Strftime.strftime!(@last_day_coded, "%F") %>">
          <%= Calendar.Strftime.strftime!(@last_day_coded, "%b %e, %Y") %></time>.
      <% else %>
        <em>never</em>.
      <% end %>
    </li>
  </ul>

  <div id="total-progress">
    <%=
      render(
        CodeStatsWeb.ComponentsView,
        "totalprogress.html",
        total_xp: @total_xp,
        new_xp: @total_new_xp,
        heading_type: "h2"
      )
    %>
  </div>
</div>

<div id="main-stats-container" class="stripe">
  <div class="spinner"></div>

  <div class="text-center">
    <p>Loading statistics&hellip;</p>
    <noscript>This website requires JavaScript to be turned on.</noscript>
  </div>
</div>
